import React, { Component } from 'react'
import CSSModules from 'react-css-modules'
import styles from './index.css'
import { HashRouter, BrowserRouter, Route, Link, Redirect, Switch } from 'react-router-dom'
import FrontLayout from '../../../layout/front/frontLayout.jsx'
import User from '../user/user.jsx'
import websiteTopPic from './website-top.jpg'

const Topic = () => (
  <div>
    <h3>561616361</h3>
  </div>
)

class Index extends Component {
  constructor (props) {
    super(props)
    console.log(this.props.match)
  }
  render () {
    let match = this.props.match
    return (
      <div>
        <FrontLayout>
          <section styleName='website-top'>
            <img src={websiteTopPic} alt='pic' />
          </section>
        </FrontLayout>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
        {/* <Route path='/admin' component={Topic} /> */}
        <Route
          exact
          path='/front/123'
          render={() => <h3>Please select a topic.</h3>}
        />
        {/* <Switch>
          <Route path={`${match.url}/info`} exact component={User} />
        </Switch> */}
      </div>
    )
  }
}

export default CSSModules(Index, styles)
